<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<title>致洪漪Love 💗</title>
	<script src="https://cdn.jsdelivr.net/npm/three@0.153.0/build/three.min.js"></script>
	<style>
		html,
		body {
			height: 100%;
			margin: 0;
			font-family: "微软雅黑", "PingFang SC", "Helvetica Neue", Arial;
			overflow: hidden;
			background: radial-gradient(circle at 20% 20%, #fff0f6 0%, #ffeef8 18%, #fffaf0 50%, #fff 100%);
		}

		#app {
			width: 100%;
			height: 100%;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			touch-action: none;
		}

		.message {
			position: absolute;
			top: 40px;
			left: 50%;
			transform: translateX(-50%);
			text-align: center;
			color: #ff3b6f;
			font-weight: 700;
			font-size: 22px;
			text-shadow: 0 2px 10px rgba(255, 80, 120, 0.25);
			z-index: 30;
		}

		.sub {
			color: #ff6f9a;
			font-weight: 500;
			font-size: 14px;
			margin-top: 6px;
		}

		/* ✅ 按钮：保留毛玻璃、高光 */
		.btn {
			background: rgba(255, 255, 255, 0.25);
			border: 1px solid rgba(255, 255, 255, 0.4);
			color: #ff2e6f;
			padding: 14px 26px;
			border-radius: 28px;
			font-size: 18px;
			cursor: pointer;
			backdrop-filter: blur(12px);
			box-shadow: 0 6px 20px rgba(255, 80, 120, 0.25), inset 0 0 10px rgba(255, 255, 255, 0.4);
			transition: all 0.3s ease;
			position: absolute;
			bottom: 40px;
			z-index: 50;
		}

		#forgiveBtn {
			left: 50%;
			transform: translateX(calc(-100% - 15px));
		}

		#denyBtn {
			left: 50%;
			transform: translateX(15px);
			white-space: nowrap;
		}

		.btn:hover {
			transform: scale(1.08);
			box-shadow: 0 10px 30px rgba(255, 80, 120, 0.35);
		}

		.bubble {
			position: absolute;
			padding: 10px 18px;
			border-radius: 50px;
			font-size: 16px;
			color: white;
			white-space: nowrap;
			opacity: 0;
			transform: scale(0.5);
			animation: fly 10s linear forwards;
		}

		@keyframes fly {
			0% {
				opacity: 0;
				transform: scale(0.5) translate(0, 0);
			}

			10% {
				opacity: 1;
				transform: scale(1) translate(0, 0);
			}

			90% {
				opacity: 1;
			}

			100% {
				opacity: 0;
				transform: scale(0.7) translate(var(--tx), var(--ty));
			}
		}

		#loveText {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			font-size: 48px;
			color: #ff2e6f;
			font-weight: 800;
			opacity: 0;
			text-shadow: 0 6px 30px rgba(255, 60, 110, 0.25);
			transition: opacity 1s ease;
		}

		@media(max-width:768px) {
			.message {
				font-size: 18px;
				top: 26px;
			}

			.btn {
				font-size: 16px;
				padding: 12px 20px;
				bottom: 25px;
			}

			#forgiveBtn {
				transform: translateX(calc(-100% - 10px));
			}

			#denyBtn {
				transform: translateX(10px);
			}

			#loveText {
				font-size: 36px;
			}
		}
	</style>
</head>

<body>
	<div id="app">
		<div class="message">
			给最可爱的 <span style="color:#ff2e6f">洪漪</span>：<br>
			<div class="sub">希望这份爱意能飘进你的心里 💞</div>
		</div>

		<!-- <button class="btn" id="forgiveBtn">原谅我 ❤</button>
		<button class="btn" id="denyBtn">不原谅 😤</button> -->

		<div id="loveText">洪漪 ❤️</div>
		<canvas id="c"></canvas>
	</div>

	<script>
		// ========= Three.js 背景 =========
		const canvas = document.getElementById('c');
		const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
		renderer.setPixelRatio(window.devicePixelRatio);
		renderer.setSize(window.innerWidth, window.innerHeight);
		const scene = new THREE.Scene();
		scene.fog = new THREE.FogExp2(0xfffbfc, 0.0008);
		const camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 2000);
		camera.position.set(0, 10, 120);
		scene.add(new THREE.AmbientLight(0xffe6f0, 0.9));

		function createParticles(count = 600) {
			const geom = new THREE.BufferGeometry();
			const pos = new Float32Array(count * 3);
			const colors = new Float32Array(count * 3);
			for (let i = 0; i < count; i++) {
				const t = Math.random() * Math.PI * 2;
				const r = 80 + Math.random() * 60;
				pos[i * 3] = Math.cos(t) * r;
				pos[i * 3 + 1] = (Math.random() - 0.5) * 120;
				pos[i * 3 + 2] = Math.sin(t) * r;
				const col = new THREE.Color().setHSL(0.95 + Math.random() * 0.1, 0.8, 0.6 + Math.random() * 0.2);
				colors[i * 3] = col.r; colors[i * 3 + 1] = col.g; colors[i * 3 + 2] = col.b;
			}
			geom.setAttribute('position', new THREE.BufferAttribute(pos, 3));
			geom.setAttribute('color', new THREE.BufferAttribute(colors, 3));
			const mat = new THREE.PointsMaterial({ size: 3.5, vertexColors: true, transparent: true, opacity: 0.9 });
			const ps = new THREE.Points(geom, mat);
			scene.add(ps);
			return ps;
		}
		const particles = createParticles();
		function animate() {
			requestAnimationFrame(animate);
			particles.rotation.y += 0.0015;
			renderer.render(scene, camera);
		}
		animate();

		// ========= 弹幕 + 烟花 =========
		const app = document.getElementById('app');
		const messages = [ "我真的好想你💞", "爱你爱你~", "请再笑一次😳", "你是最可爱的💗", "我会改的🥺", "原谅我嘛💋", "没有你不行💔", "我想抱抱你🤗"];
		const colors = ['#ff7aa0', '#ff4d7a', '#ff6f9a', '#ff92b2', '#ffb3c9', '#ff8cc6'];

		function createBubble() {
			const div = document.createElement('div');
			div.className = 'bubble';
			div.textContent = messages[Math.floor(Math.random() * messages.length)];
			div.style.background = colors[Math.floor(Math.random() * colors.length)];
			const x = Math.random() * window.innerWidth;
			const y = Math.random() * window.innerHeight;
			div.style.left = x + 'px';
			div.style.top = y + 'px';
			div.style.setProperty('--tx', (Math.random() - 0.5) * 800 + 'px');
			div.style.setProperty('--ty', (Math.random() - 0.5) * 600 + 'px');
			app.appendChild(div);
			setTimeout(() => div.remove(), 10000);
		}
		setInterval(createBubble, 250);

		// 烟花
		const fireworkGroup = new THREE.Group();
		scene.add(fireworkGroup);

		function spawnFirework(colorHex = 0xff7aa0) {
			const count = 150;
			const geom = new THREE.BufferGeometry();
			const pos = new Float32Array(count * 3);
			const vel = [];
			const colorsArr = new Float32Array(count * 3);

			for (let i = 0; i < count; i++) {
				pos[i * 3] = 0; pos[i * 3 + 1] = 0; pos[i * 3 + 2] = 0;
				const dir = new THREE.Vector3((Math.random() * 2 - 1), (Math.random() * 2 - 0.3), (Math.random() * 2 - 1)).normalize();
				vel.push(dir.multiplyScalar(1.5 + Math.random()));
				const c = new THREE.Color(colorHex);
				colorsArr[i * 3] = c.r; colorsArr[i * 3 + 1] = c.g; colorsArr[i * 3 + 2] = c.b;
			}

			geom.setAttribute('position', new THREE.BufferAttribute(pos, 3));
			geom.setAttribute('color', new THREE.BufferAttribute(colorsArr, 3));
			const mat = new THREE.PointsMaterial({ size: 4.5, vertexColors: true, transparent: true });
			const points = new THREE.Points(geom, mat);
			points.userData = { vel };
			fireworkGroup.add(points);
			setTimeout(() => fireworkGroup.remove(points), 2500);
		}

		function animateFireworks() {
			requestAnimationFrame(animateFireworks);
			fireworkGroup.children.forEach(points => {
				const posArr = points.geometry.attributes.position.array;
				points.userData.vel.forEach((v, i) => {
					posArr[i * 3] += v.x;
					posArr[i * 3 + 1] += v.y;
					posArr[i * 3 + 2] += v.z;
					v.y -= 0.03;
				});
				points.geometry.attributes.position.needsUpdate = true;
			});
		}
		animateFireworks();

		// 按钮逻辑
		const forgiveBtn = document.getElementById('forgiveBtn');
		const denyBtn = document.getElementById('denyBtn');
		const loveText = document.getElementById('loveText');

		forgiveBtn.addEventListener('click', () => {
			for (let i = 0; i < 5; i++) spawnFirework(0xff4d7a);
			heartifyBubbles();
		});

		// ✅ 不原谅按钮逃跑逻辑（在整个屏幕范围内逃跑，带平滑动画）
		let isRunningAway = false;

		function runAwayButton() {
			if (isRunningAway) return;
			isRunningAway = true;

			const btnRect = denyBtn.getBoundingClientRect();
			const padding = 40;
			const maxX = window.innerWidth - btnRect.width - padding;
			const maxY = window.innerHeight - btnRect.height - padding;

			// 生成远离当前位置的随机位置
			let randomX, randomY;
			let attempts = 0;
			do {
				randomX = padding + Math.random() * (maxX - padding);
				randomY = padding + Math.random() * (maxY - padding);
				attempts++;
			} while (
				attempts < 20 &&
				Math.abs(randomX - btnRect.left) < 150 &&
				Math.abs(randomY - btnRect.top) < 150
			);

			// 添加平滑过渡效果，不改变 transform
			denyBtn.style.transition = "left 0.3s ease-out, top 0.3s ease-out";
			denyBtn.style.left = `${randomX}px`;
			denyBtn.style.top = `${randomY}px`;

			setTimeout(() => {
				isRunningAway = false;
			}, 350);
		}

		// 使用mousemove检测鼠标接近
		document.addEventListener('mousemove', (e) => {
			const btnRect = denyBtn.getBoundingClientRect();
			const distance = 80;

			if (
				e.clientX >= btnRect.left - distance &&
				e.clientX <= btnRect.right + distance &&
				e.clientY >= btnRect.top - distance &&
				e.clientY <= btnRect.bottom + distance
			) {
				runAwayButton();
			}
		});

		denyBtn.addEventListener('touchstart', (e) => {
			e.preventDefault();
			runAwayButton();
		});

		function heartifyBubbles() {
			const allBubbles = document.querySelectorAll('.bubble');
			const cx = window.innerWidth / 2, cy = window.innerHeight / 2;
			const a = 16;
			allBubbles.forEach((b, i) => {
				const t = i * 0.3;
				const x = a * Math.pow(Math.sin(t), 3);
				const y = -(13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t));
				const targetX = cx + x * 15;
				const targetY = cy + y * 15;
				const rect = b.getBoundingClientRect();
				const startX = rect.left + rect.width / 2;
				const startY = rect.top + rect.height / 2;
				const dx = targetX - startX, dy = targetY - startY;
				b.style.transition = 'transform 1.8s ease-in-out';
				b.style.transform = `translate(${dx}px,${dy}px) scale(1.1)`;
			});
			setTimeout(() => loveText.style.opacity = 1, 1800);
		}

		window.addEventListener('resize', () => {
			renderer.setSize(window.innerWidth, window.innerHeight);
			camera.aspect = window.innerWidth / window.innerHeight;
			camera.updateProjectionMatrix();
		});
	</script>
</body>

</html>